<template>
	<div class="useropinion">
		<div class="useropinionTitle">绑定手机</div>
		<div class="mymessageText changephone1">
			<div class="changephone1-div1 changephone1-div2">
				<span>1.验证原手机号</span>
				<span>2.验证新手机号</span>
				<span>3.换绑成功</span>
			</div>
			<div><input type="text" value="15503757093" class="changephone1-ipt1"></div>
			<div><input type="text" placeholder="验证码" class="changephone1-ipt2"><div @click="refreshCode"><piccode :identifyCode="identifyCode" class="piccode"></piccode></div></div>
			<div class="wudi"><span>获取验证码</span><input type="text" placeholder="输入密码验证身份" class="changephone1-ipt3"></div>
			<div class="changephonesub"><router-link to="/myself/mymessage/changephone3">提交验证</router-link></div>
		</div>
	</div>
</template>

<script>
	import piccode from '../components1/picCode.vue'
	export default {
		name: "codetest",
		components: {
			piccode
		},
		data() {
			return {
				identifyCodes: "1234567890",
				identifyCode: ""
			};
		},
		mounted() {
			this.identifyCode = "";
			this.makeCode(this.identifyCodes, 4);
		},
		methods: {
			randomNum(min, max) {
				return Math.floor(Math.random() * (max - min) + min);
			},
			refreshCode() {
				this.identifyCode = "";
				this.makeCode(this.identifyCodes, 4);
			},
			makeCode(o, l) {
				for (let i = 0; i < l; i++) {
					this.identifyCode += this.identifyCodes[
						this.randomNum(0, this.identifyCodes.length)
					];
				}
			}
		}
	}
</script>

<style>
	.changephone1 .changephone1-div2 span:nth-of-type(1){
		background:url("../assets/img/banner-13.png") no-repeat;
		background-size: 100% 100%;
		color: #000000;
	}
	.changephone1 .changephone1-div2 span:nth-of-type(2){
		background:url("../assets/img/banner-13.png") no-repeat;
		background-size: 100% 100%;
		color: white;
	}
	.changephone1 .changephone1-div2 span:nth-of-type(3){
		background:url("../assets/img/banner-13.png") no-repeat;
		background-size: 100% 100%;
	}
	.wudi{
		position: relative;
	}
	.wudi span{
		width: 100px;
		height: 30px;
		line-height: 30px;
		position: absolute;
		text-align: center;
		left:18%;
		top: 5px;
		background: #00B066;
		cursor: pointer;
		color: white;
	}
</style>
